---
name: Select 选择器
menu: Components
route: /components/select
order: 80
---

import { Playground,Props } from 'docz';
import { State, Toggle } from 'react-powerplug';
import Select from './';
import { default as OriginalSelect} from 'antd/lib/select'
import './style/index.less'

# Select 选择器

下拉选择器。

## 引入

```
import { Select } from 'antd-virtualized';
```
## 原生Antd Select对比

<OriginalSelect
  style={{ width: 120 }}
  onDropdownVisibleChange={(visible)=>console.log('visible',visible)}
>
{Array.from({ length: 20 }).map((v, i) => (<OriginalSelect.Option key={i}>test</OriginalSelect.Option>))}
</OriginalSelect>

## 代码演示

### 基本使用

<Playground>
<Select
  placeholder="支持大数据的Select"
  options={Array.from({ length: 2000 }).map((v, i) => ({ id: i, title: 'test' + i }))}
  style={{ width: 120 }}
/>
<Select
  placeholder="支持大数据的Select"
  titleField='name'
  options={[{id:1,name:'1'},{id:'2',name:'2',disabled:true},{id:'3',name:'3'}]}
  keyField='id'
  style={{ width: 120 }}
  onDropdownVisibleChange={(visible)=>console.log('visible',visible)}
  defaultOpen
/>
</Playground>

### 多选

<Playground>
<Select
  placeholder="支持大数据的Select"
  titleField='name'
  options={Array.from({ length: 2000 }).map((v, i) => ({ id: i, name: 'test' + i }))}
  keyField='id'
  style={{ width: 120 }}
  mode="multiple"
  value={[2,4]}
  onDropdownVisibleChange={(visible)=>console.log('visible',visible)}
/>
</Playground>

### 带搜索框

<Playground>
  <State initial={{value: 100}}>
    {({ state, setState }) => (
      <Select
        allowClear
        showSearch
        placeholder="支持大数据的Select"
        titleField='name'
        options={Array.from({ length: 2000 }).map((v, i) => ({ id: i, name: 'test' + i }))}
        keyField='id'
        style={{ width: 120 }}
        defaultValue={state.value}
        filterOption={(input, option) => option.name.indexOf(input) >= 0}
        onChange={(value) => (setState({ value }))}
      />
     )}
  </State>

</Playground>

### 定义下拉列表为空时显示的内容

<Playground>
原始
<Select style={{ width: 120 }}/>
<br/><br/>
自定义 
<Select
  style={{ width: 120 }}
  notFoundContent="数据为空"
/>
置空
<Select
  style={{ width: 120 }}
  notFoundContent={null}
/>
</Playground>


**注意**：其他 Ant Design Select 原生的功能，大部分支持，可以用参考 Select 文档

## API

<Props of={Select} isToggle title="⚛️ Select props"/>
